<template>
  <div class="app-container">
    <el-row>
      <el-col :span="5">
        <el-card class="box-card">
          <template #header>
            <div class="clearfix">
              <span>个人信息</span>
            </div>
          </template>
          <div>
            <!-- <div style="text-align: center">
          <div class="el-upload">
            <img src="avatar" title="点击上传头像" class="avatar" @click="toggleShow">
            <myUpload v-model="show" :headers="headers" :url="updateAvatarApi" method="PUT" field="image" @crop-upload-success="cropUploadSuccess" />
          </div>
        </div> -->
            <ul class="user-info">
              <li>
                <div>
                  登录账号
                  <div class="user-right">{{ this.userinfo.username }}</div>
                </div>
              </li>
              <li>
                用户姓名
                <div class="user-right">{{ this.userinfo.name }}</div>
              </li>
              <li>
                当前职位
                <div class="user-right">{{ this.userinfo.job }}</div>
              </li>
              <li>
                手机号码
                <div class="user-right">{{ this.userinfo.mobile }}</div>
              </li>
              <li>
                用户邮箱
                <div class="user-right">{{ this.userinfo.email }}</div>
              </li>
              <li>
                安全设置
                <div class="user-right">
                  <a @click="InfoUserPasswordDialog = true">修改密码</a>
                </div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10">
        <el-card class="box-card" style="margin-left: 20px">
          <template #header>
            <div class="card-header">
              <span>信息修改</span>
            </div>
          </template>
          <div>
            <el-form
              ref="formRef"
              :rules="rules"
              :model="form"
              label-width="80px"
            >
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" style="width: 40%" />
                <!-- <span style="color: #C0C0C0;margin-left: 10px;">用户真实姓名或昵称</span> -->
              </el-form-item>
              <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" style="width: 40%" />
              </el-form-item>

              <el-form-item label="邮箱" prop="email">
                <el-input v-model="form.email" style="width: 40%" />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit('form')"
                  >保存配置</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <UserPassword v-model:visible="InfoUserPasswordDialog"></UserPassword>
</template>

<script>
import UserPassword from "@/components/UserPassword";
import { getUserInfo, changeInformation } from "@/api/user/userinfo";
import { phone, email } from "@/utils/validate";
export default {
  name: "profileIndex",
  components: {
    UserPassword,
  },
  data() {
    return {
      form: {},
      rules: {
        name: [
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        email: [
          { validator: email, message: "请输入正确邮箱", trigger: "blur" },
        ],
        mobile: [
          { validator: phone, message: "请输入正确手机号", trigger: "blur" },
        ],
      },
      userinfo: "",
      InfoUserPasswordDialog: false,
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getUser() {
      console.log("UserInfo");
      let username = sessionStorage.getItem("username");
      const params = {
        username: username,
      };
      getUserInfo(params).then((response) => {
        this.userinfo = response.data;
      });
    },
    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log("form", this.form);
          changeInformation(this.form).then((response) => {
            console.log("msg:", response.msg);
            this.$message({
              message: "修改成功",
              type: "success",
            });
          });
          this.getUser();
        } else {
          // console.log('表单格式错误！')
          this.$message({
            message: "表单格式错误",
            type: "error",
          });
        }
      });
    },
    onRest() {
      this.$refs.formRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.user-info {
  padding-left: 0;
  list-style: none;
  li {
    border-bottom: 1px solid #f0f3f4;
    padding: 11px 0;
    font-size: 13px;
  }
  .user-right {
    float: right;
  }
  a {
    color: #317ef3;
  }
}
</style>
